<template>
<div class="main-page">
  <div class="main-container">
    <MainHeader></MainHeader>
    <div class="main-display">
      <div class="main-display-container">
        <ul class="main-post-list">
          <li>
            <div class="main-content">
              <div class="main-font">
                <h2 class="main-title">公告1</h2>
                <p class="main-text">在遥远的未来，人类已经突破了地球的束缚，开始向浩瀚的宇宙进发。星际旅行不再是梦想，而是成为了一种日常的探险活动。在这个时代，一个名为“星际探索者号”的飞船正缓缓驶向一颗未知的行星——阿尔法-42。</p>
                <p class="main-text">阿尔法-42位于银河系的边缘，是一颗充满神秘色彩的行星。它的表面覆盖着厚厚的云层，从远处看去，仿佛是一颗巨大的蓝色宝石。科学家们推测，这颗行星上可能存在液态水，甚至可能有生命存在的迹象。</p>
                <p class="main-text">飞船的船长是一位经验丰富的宇航员，名叫艾丽莎·雷诺兹。她带领着一支由科学家、工程师和探险家组成的团队，准备揭开阿尔法-42的秘密。在接近行星的过程中，他们遇到了强烈的电磁风暴，飞船的导航系统一度陷入瘫痪。但凭借着团队的智慧和勇气，他们成功地稳定了飞船，并安全着陆。</p>
                <p class="main-text">着陆后，团队成员们穿上了特制的宇航服，开始了对行星表面的探索。他们发现了一片广阔的森林，树木高耸入云，树叶呈现出奇异的紫色。空气中弥漫着一种淡淡的香气，让人感到既陌生又熟悉。科学家们采集了土壤样本和植物标本，准备带回飞船进行分析。</p>
                <p class="main-text">在探索过程中，他们还发现了一些古老的遗迹，似乎是某种智慧生命曾经存在的证据。这些遗迹由一种未知的金属构成，表面刻满了复杂的图案和符号。团队中的语言学家试图解读这些符号，希望能够找到关于这个古老文明的线索。</p>
                <p class="main-text">随着探索的深入，他们逐渐揭开了阿尔法-42的秘密。这颗行星曾经是一个繁荣的文明的家园，但由于一场灾难，这个文明几乎灭绝。然而，它的遗迹和智慧仍然留在这个星球上，等待着后来者的发现。</p>
                <p class="main-text">艾丽莎·雷诺兹和她的团队意识到，他们的发现可能会改写人类对宇宙的认知。他们决定将这些珍贵的信息带回地球，与全世界分享。而阿尔法-42，也将成为人类探索宇宙的一个新的起点。</p>
                <p class="main-text">上文由ai生成，仅用于调试</p>
              </div>
            </div>
          </li>
          <li>
            <div class="main-content">
              <div class="main-font">
                <h2 class="main-title">公告2</h2>
                <p class="main-text">在一片被遗忘的山谷中，隐藏着一个名为“时光小镇”的神秘地方。这里的一切都仿佛停留在过去，古老的建筑、复古的街道，还有那些穿着旧式服装的居民，让人仿佛穿越了时空。</p>
                <p class="main-text">小镇的入口是一座古老的石桥，桥下流淌着一条清澈的小河，河水在阳光的照耀下闪烁着银光。传说，这座桥连接着过去与现在，只有心怀纯真的人才能找到通往小镇的路。</p>
                <p class="main-text">艾米丽是一位年轻的旅行者，她偶然间发现了这座石桥，并被它深深吸引。当她踏上桥的那一刻，时间似乎变得缓慢，周围的景色也逐渐变得模糊。等她再次睁开眼时，她已经来到了时光小镇。</p>
                <p class="main-text">小镇的居民们热情地欢迎了她，仿佛早已知道她的到来。他们邀请她参加一场盛大的节日庆典，庆祝小镇的守护神——时光老人的诞辰。庆典上，人们穿着华丽的复古服饰，跳着欢快的舞蹈，空气中弥漫着甜蜜的花香和烤面包的香味。</p>
                <p class="main-text">在庆典中，艾米丽遇到了一位神秘的老人，他自称是时光老人的使者。老人告诉她，小镇的和平正受到一种名为“遗忘之影”的威胁，这种阴影会逐渐侵蚀人们的记忆，让小镇消失在时间的长河中。为了拯救小镇，艾米丽需要找到三颗隐藏在小镇各处的时光宝石。</p>
                <p class="main-text">于是，艾米丽开始了她的冒险。她首先来到了小镇的图书馆，在那里，她找到了第一颗宝石——记忆之石。这颗宝石散发着柔和的光芒，仿佛能唤起人们内心深处的记忆。接着，她来到了小镇的钟楼，在钟楼的顶端，她找到了第二颗宝石——希望之石。这颗宝石闪烁着温暖的光芒，让人充满希望。</p>
                <p class="main-text">最后，艾米丽来到了小镇的中心广场，在那里，她找到了第三颗宝石——永恒之石。这颗宝石散发着耀眼的光芒，仿佛能冻结时间。当她将三颗宝石放在一起时，一道光芒冲天而起，照亮了整个小镇。</p>
                <p class="main-text">“遗忘之影”被驱散了，小镇的和平得以恢复。时光老人的使者微笑着对艾米丽说：“感谢你拯救了时光小镇，你的勇气和善良将永远被这里的人们铭记。”艾米丽告别了小镇的居民，再次踏上了那座古老的石桥。当她回到现实世界时，她发现手中多了一枚小小的宝石，那是小镇送给她的纪念。</p>
                <p class="main-text">上文由ai生成，仅用于调试</p>
              </div>
            </div>
          </li>
        </ul>
        <ul class="main-contest-list" style="width: 30%;">
          <div class="main-content">
            <div class="rightFont">
              <h2 class="main-title">Contest 1</h2>
              <p class="main-text">尊敬的用户：</p>
              <p class="main-text">系统将于2025年3月15日（周六）凌晨2:00至4:00进行维护升级。期间可能会出现短暂的服务中断，给您带来不便，敬请谅解！</p>
              <p class="main-text">感谢您的支持与配合！</p>
              <p class="main-text">[系统公告] 2025年3月14日</p>
              <p class="main-text">上文由ai生成，仅用于调试</p>
            </div>
          </div>
          <div class="main-content">
            <div class="rightFont">
              <h2 class="main-title">Contest 2</h2>
              <p class="main-text">各位用户：</p>
              <p class="main-text">我们很高兴地宣布，新版本已上线！本次更新增加了“夜间模式”功能，可在设置中开启，为您带来更舒适的阅读体验。 </p>
              <p class="main-text">[功能更新] 2025年3月14日</p>
              <p class="main-text">上文由ai生成，仅用于调试</p>
            </div>
          </div>
        </ul>
      </div>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
import MainHeader from '@/components/main-header.vue';
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

.main-page{
  background-image: url('../assets/Login-background.jpg');
  .main-container {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0 20px;
    .main-display {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      max-width: 1200px;
      .main-display-container {
        display: grid;
        grid-template-columns: 60% 40%;
        gap: 5px; /* 列之间的间距 */
        .main-post-list {
          list-style-type: none;
          margin: 0 auto;
          justify-content: center;
          /* text-align: right; */
          .main-content {
            width: 60vw;
            margin-top: 30px;
            padding: 5px;
            background: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 10px;

            .main-font{
              margin:5px;
              .main-title {
                font-family: 'Roboto', sans-serif;
                font-weight: 500;
                color: #333333;
                margin-bottom: 15px;
                margin-left:1vw;
              }
              .main-text {
                font-family: 'Roboto', sans-serif;
                font-size: 16px;
                color: #666666;
                line-height: 1.6;
                margin-left:1vw;
                margin-right:1vw;
              }
            }
          }
        }
        .main-contest-list {
          list-style-type: none;
          justify-content: left;
          /* text-align: left; */
          margin: 0 auto;
          .main-content {
            width: 22vw;
            margin-top: 30px;
            padding: 5px;
            background: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            .rightFont{
              margin:5px;
              .main-title {
                font-family: 'Roboto', sans-serif;
                font-weight: 500;
                color: #333333;
                margin-bottom: 15px;
                margin-left:0.7vw;
              }
              .main-text {
                font-family: 'Roboto', sans-serif;
                font-size: 16px;
                color: #666666;
                line-height: 1.6;
                margin-left:0.7vw;
                margin-right:0.7vw;
              }
            }
          }
        }
      }
    }
  }
}
</style>